<template>

    <d2-container class="d-flex flex-column">
      <template >
        <div class="d-flex" slot="header">
  
          <el-form
            class="d-flex b-s my-10"
			size="small"
          >
            <el-form-item class="d-flex mr_20" label="公司名称">
              <el-input
                v-model="inputva"
                placeholder="公司名称"
                clearable
              />
            </el-form-item>
  
            <el-form-item class="mr_20">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="getTableList2()"
                >查询</el-button
              >
            </el-form-item>

            <el-form-item class="mr_20">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="add()"
                >添加公司</el-button
              >
            </el-form-item>
          </el-form>
        </div>
  
  
        <div class="d-flex h-100 b-s flex-column">
          <div class="d-flex flex-1">
            <div class="overflow" v-if="orderList">
              <vxe-grid
                keep-source
                border
                resizable
                highlight-hover-row
                size="small"
                ref="pGrid"
                :columns="columns"
                height="100%"
                :data="orderList"
                :row-config="{ useKey: true }"
                :column-config="{ useKey: true }"
                :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
              >
              </vxe-grid>
            </div>
          </div>
        </div>
  
        <div class="d-flex" slot="footer">
                  <vxe-pager background size="medium" align="right" :border="false" 
						:current-page="current_page"
                        :page-size="per_page" 
                        :total="total"
                        :layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
                        @page-change="handlePageChange($event)">
                  </vxe-pager>
              </div>

				<!-- 测试添加公司 -->
				<Mydialog @getData="getTableList2()" @dCancel="userdCancel($event)" title="添加公司" diyuserRef="adduser" :userRules="rules"  :userData="newCompany"  :show-dialog.sync="showDialog" />
			  
				<!-- 测试修改公司 -->
				<Mydialog @getData="getTableList2()" @dCancel="userdCancel($event)" title="修改公司" diyuserRef="adduser2" :userRules="rules"  :userData="newCompany"  :show-dialog.sync="showDialog2" />

					
			  
			
      
      </template>
     
    </d2-container>
  </template>
  
  <script>
  let that;
  import Mydialog from '../../components/addcompany/addcompany.vue'
  import { MessageBox } from 'element-ui';
  export default {
  
    components: {
		Mydialog
    },
    data() {
      return {
		current_id:0,
		rules: {
		          name: [
		            { required: true, message: '请输昵称', trigger: 'blur' },
		            { min: 2, max: 5, message: '长度在 3 到 8 个字符', trigger: 'blur' }
		          ],
		          status: [{
						required: true,
						message: '状态不能为空!',
						trigger: ['blur','change']
					}]
		        
		        },
	
		showDialog2:false,
	
        newCompany:{//新公司
			name:'',
			status:''
		},
        formLabelWidth: '120px',
        curentstate:0,
        curent_id:0,
        showDialog:false,
        inputva:'',
        current_page:1,
        last_page :1,
        per_page:1,
        orderList:[],
        tableLoading: false,
        curent: 0,
        total: 0,
		confirmPasswordError:'',
        columns: [
          {
            title: "创建时间",
            field: "created_at",
            width: 180,
            sortable: true,
            align: "center",
          },
          {
            title: "ID",
            field: "id",
            width: 100,
            sortable: true,
            align: "center",
          },
          {
            title: "名称",
            field: "name",
            width: 200,
            sortable: false,
            align: "center",
          },
          {
            title: "更新时间",
            field: "updated_at",
            width: 180,
            sortable: true,
            align: "center",
          },
          {
            title: "操作",
            field: "other",
            width: 200,
            fixed: "right",
            sortable: false,
            align: "center",
            slots: {
              default: ({ row }) => {
                return [
                  <el-button 
                    size="mini"
                    round
                    icon="el-icon-edit"
                    v-show={true}
                    onClick={() => this.addOrUpdateData2(row,'B')}
                    type="primary"
                  >
                    {" "}
                    修改{" "}
                  </el-button>,
                   <el-button size="mini" round icon="el-icon-delete" v-show={this.$hasPermission("playlet:playlet:delete")} type="danger" onClick={() => this.deleteHandleSetter(row)}>
                     {" "}
                     删除{" "}
                   </el-button>,
                ];
          
              },
            },
          },
        ],
      };
    },
    created() {
   
    },
    mounted() {
  
      this.getTableList2()
    },
    computed: {
    },
	watch:{
	},
    methods: {

        async getTableList2() { //获取数据
			this.tableLoading = true;
			let current_page = this.current_page
			let inputva = this.inputva
			if(inputva!=''){
				current_page = 1
			}

            const tableRes = await this.$axios.get("/api/playlet/company?"+this.$qs.stringify({"keyword":inputva,"page":current_page}));
			console.log(262,tableRes)
			this.current_page = tableRes.current_page
			this.last_page = tableRes.last_page
			this.per_page = tableRes.per_page
			this.total = tableRes.total
			this.orderList = tableRes.data

        },
   
		async addOrUpdateData2(e,str){ // 打开修改窗口
			let res = await this.$axios.get(`/api/playlet/company/update/${e.id}`)
			console.log(325,res)
			let newCompany = this.newCompany
			newCompany.name =  res.name
			newCompany.status =  res.status
			newCompany.id = res.id
            this.newCompany = newCompany
            console.log(279,this.newCompany)
			this.showDialog2 = !this.showDialog2
		},
	  
		handlePageChange(e){ //分页跳转
			this.current_page = e.currentPage
			this.getTableList2()
		},


		deleteHandleSetter(e){ //删除用户
			console.log(e)
			let that = this
			MessageBox.confirm('您确定要执行此操作吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.delete(`/api/playlet/company/delete/${e.id}`).then(res => {
				console.log(381,res)
				that.$message({
					message: '删除成功',
					type: 'success',
					duration: 1200
				})
					this.getTableList2()
				})
				// 用户点击了确定按钮，执行对应操作
			}).catch(() => {
				// 用户点击了取消按钮，取消对应操作
			});
		},

		add(){ //打开添加用户窗口
			  this.showDialog = !this.showDialog;
		},
	  
		userdCancel(value){ //取消关闭窗口
			console.log(499,value)
			let newCompany = this.newCompany
			newCompany.name =  ''
			newCompany.status =  0
			
			this.newCompany = newCompany
			console.log(485,this.newCompany)
			if(value == "add"){
				   this.showDialog = !this.showDialog;
			}else if(value == "updata"){
				   this.showDialog2 = !this.showDialog2
			}
		},

    },
  };
  </script>
  
  <style lang="scss" scoped>
  :deep(.vxe-cell .el-button) {
    margin-bottom: 10px;
  }
  .item {
    .close {
      width: 26px;
      height: 26px;
      border: 2px solid #f76f21;
      border-radius: 26px;
      .close-icon {
        font-size: 20px;
        color: #f76f21;
      }
    }
    .item-title {
      font-size: 22px;
      font-weight: bold;
    }
  
    .item-simulate {
      border: 6px solid #a3a2a2;
      border-radius: 10px;
      width: 375px;
      min-height: 700px;
      max-height: 1200px;
      margin: 0 auto 10px;
      padding: 10px 5px;
  
      .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
  
        .box {
          width: 165px;
          height: 93px;
          background: #f9f8f8;
          border: 2px solid #f5f5f5;
          border-radius: 8px;
          display: flex;
          position: relative;
          flex-direction: column;
          justify-content: flex-end !important;
          padding: 0 !important;
          box-sizing: content-box;
          margin: 10px 0;
          align-items: center;
          .pointer {
            width: 50%;
            height: auto;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .price {
            font-size: 15px;
            font-weight: 600;
            line-height: 35px;
            margin: 0;
            em {
              font-size: 35px;
              font-style: normal;
            }
          }
          .get {
            width: 100%;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: linear-gradient(180deg, #fff19d, #ff9e00);
            border-radius: 0 0 5px 5px;
            font-size: 14px;
            color: #583600;
            letter-spacing: 1px;
            font-weight: 500;
            margin: 0;
          }
        }
        .box-normal {
          .price {
            color: #f76f21;
          }
          .get {
            background: #fff7e3;
            color: #bf891c;
          }
        }
        .box-active {
          border: 2px solid #f97d36;
        }
      }
    }
  }
  .mr_20{
    margin-right: 20px;
  }
  </style>